<template>
  <div class="target_model_box">
    <a-button
      type="primary"
      v-if="isOperation"
      style="margin-left: 536px;margin-bottom: 10px;"
      :disabled="isDisabled"
      @click="onQuery"
      >查询</a-button
    >
    <custom-table
      ref="table"
      rowKey="id"
      :showColSettings="false"
      :hideColSettings="['action']"
      :showAlert="false"
      :showSelection="true"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @selectedRow="onSelectedRow"
      :customRow="clickCustomRow"
      :scroll="{ y: 500 }"
      @change="onTableChange"
    >
      <template slot="result" slot-scope="text">
        <span v-if="text == 1" style="color:rgba(112, 182, 3, 0.9)">查询中</span>
        <span v-else-if="text == 2" style="color:#1890FF">已查询</span>
        <span v-else style="color:rgba(217, 0, 27, 0.99)">未查询</span>
      </template>
      <template slot="phoneNumber" slot-scope="text, record">
        <span>{{ text }}</span>
        <a-tag v-if="record.isSamplePerson" style="margin-top:10px;" color="red">负样本人员</a-tag>
      </template>
    </custom-table>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/wxSmuggle/eventModel.js'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  components: {
    CustomTable
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      pageFilter: {
        taskId: this.$route.query.taskId,
        type: '1',
        pageNo: 1,
        pageSize: 10
      },
      queryFilter: {
        //查询参数
        taskNum: this.$route.query.taskId
      },
      pageData: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 80,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          // customRender: (text, record, index) => `${(this.pagination.current - 1) * this.pagination.defaultPageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber',
          width: 120,
          scopedSlots: { customRender: 'phoneNumber' }
        },
        {
          title: '姓名/代号',
          dataIndex: 'userName'
        },
        {
          title: '查询状态',
          dataIndex: 'result',
          scopedSlots: { customRender: 'result' }
        },
        {
          title: '数据更新时间',
          width: 140,
          dataIndex: 'resultTime'
        }
      ],
      isDisabled: true,
      selectKeys: [],
      loading: false,
      isOperation: true,
      pTimer: 0
    }
  },
  mounted() {
    // this.refreshTable()
  },
  methods: {
    // 路由变化
    setOperation(val, taskId) {
      this.isOperation = val
      if (taskId != undefined) {
        this.queryFilter.taskNum = taskId
        this.pageFilter.taskId = taskId
      }
      this.refreshTable()
    },
    clickCustomRow(record) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            if (record.result !== 2) {
              this.$message.warning('未查询出结果，无法操作')
              return
            }
            _this.$emit('clickRow', record)
          }
        }
      }
    },

    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onQuery() {
      this.queryFilter.phone = this.selectKeys.map(item => item.phoneNumber)
      this.queryRealTimeTrajectory()
      // this.$emit('querySuccess')
    },
    refreshTable() {
      // let formData = Object.assign({}, this.formData, this.pageFilter)
      this.loading = true
      api
        .queryPageByTask(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            querySimpleByPhoneList(this, 1, this.pageData.records)
          } else {
            this.$message.warning(res.message)
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    queryRealTimeTrajectory() {
      api
        .queryRealTimeTrajectory(this.queryFilter)
        .then(res => {
          if (res.success) {
            this.refreshTable()
            //是否启动定时器刷新
            // let flag = false
            // if (this.pageData.records.length > 0) {
            //   this.pageData.records.forEach(item => {
            //     if (item.result != 2) {
            //       flag = true
            //     }
            //   })
            // }
            // console.log('flag')
            // console.log(flag)
            // if (flag) {
            //   this.pTimer = setInterval(() => {
            //     this.refreshTable()
            //   }, 5000) //5秒查一下
            // }
            this.$message.info(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    }
  }
}
</script>
<style scoped lang="less">
/deep/.ant-table-row {
  cursor: pointer;
}
</style>
